<template>
  <div>
    <div v-if="showMobilePage" :class="{'mobile-form':showMobilePage}" class="form">
      <el-input
        v-model="keyWord"
        type="text"
        size="small"
        placeholder="搜索你有疑问的功能"
        class="form-input"
        style="font-size:14px;"
        clearable
        @keyup.enter.native="toSearh"
      >
        <svg-icon slot="prefix" icon-class="article-search" class="el-icon-search" />
        <el-button slot="append" size="small" type="primary" class="search-btn" @click="toSearh">查询</el-button>
      </el-input>
    </div>
    <div v-if="!showMobilePage" class="help-title">
      <div class="title-mask">
        <img :src="helpTitleBg" alt="dialogTitleMask">
      </div>
      <div class="help-search">
        <div class="search-placeholder">Hi，请问有什么可以帮你？</div>
        <div class="form">
          <el-input
            v-model="keyWord"
            type="text"
            size="small"
            placeholder="搜索你有疑问的功能"
            class="form-input"
            style="font-size:14px;"
            clearable
            @keyup.enter.native="toSearh"
          >
            <svg-icon slot="prefix" icon-class="article-search" class="el-icon-search" />
            <el-button slot="append" size="small" type="primary" class="search-btn" @click="toSearh">查询</el-button>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import helpTitleBg from '@/assets/help/help-title-bg.png';
import { mapState } from 'vuex';

export default {
  props: {
    dialogKeyWord: {
      type: String,
      default: ''
    },
    isClearKeyWord: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      helpTitleBg,
      keyWord: ''
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    dialogKeyWord: {
      handler(val) {
        if (val) {
          this.keyWord = val;
          this.$emit('getKeyWord', val);
        }
      },
      immediate: true
    },
    isClearKeyWord: {
      handler(val) {
        if (val) {
          this.keyWord = '';
          this.$emit('getKeyWord', this.keyWord);
        }
      },
      immediate: true
    },
    keyWord: {
      handler(val) {
        if (val) {
          this.$emit('setClearKeyWord');
        }
      },
      immediate: true
    }
  },
  methods: {
    toSearh() {
      this.$emit('getKeyWord', this.keyWord);
    }
  }
};
</script>
<style lang="scss" scoped>
.help-center {
  .help-title {
    position: relative;
    width: 100%;
    height: 140px;
    opacity: 1;
    padding: 0 40px;
    background: linear-gradient(336deg, #4056ff 0%, #0c3cd0 100%);
    .title-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 212px;
      height: 140px;
      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
.help-search {
  position: absolute;
  top: 72px;
  left: calc(50% - 30%);
  width: 60%;
  height: 128px;
  background: #ffffff;
  box-shadow: 0px 1px 0px #dde1ea;
  opacity: 1;
  border-radius: 4px;
  z-index: 100;
  padding: 24px 0 16px;
  .search-placeholder {
    text-align: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 14px;
    color: #141c3d;
    opacity: 1;
  }
  &::v-deep {
    .el-input-group__append {
      border-color: #406EFF;
    }
    .search-btn {
      color: #fff;
      background: #406EFF;
      height: 31px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      padding: 0 17px;
      border: none;
    }
  }
}
.form {
  margin-top: 24px;
  text-align: center;
  .form-input {
    width: 480px;
    & ::v-deep {
      .el-input__prefix {
        left: 10px;
        top: 5px;
      }
    }
    .el-icon-search {
      width: 14px;
      height: 14px;
    }
  }
}
.mobile-form {
  margin-top: 0;
  ::v-deep {
    .el-input {
      width: 100%;
    }
    .el-input-group__append {
      border-color: #406EFF;
    }
    .search-btn {
      color: #fff !important;
      background: #406EFF !important;
      height: 31px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      padding: 0 17px;
      border: none;
    }
  }
}
</style>
